<template>
    <div id="apply">
        <van-nav-bar title="配送清单" left-arrow fixed safe-area-inset-top @click-left="onClickLeft"></van-nav-bar>

        <div></div>
        <div class="time-tabs">
            <div class="time-left">
                <div :class="{ 'time-active': is_active == 0 }" @click="onActive(0)">{{ today }}订单</div>
                <div :class="{ 'time-active': is_active == 1 }" @click="onActive(1)">{{ nextday }}订单</div>
            </div>
        </div>

        <div class="type">
            <div class="type-item" :class="{ 'type-c': is_type == 0 }" @click="onType(0)">备货清单</div>
            <div class="type-item" :class="{ 'type-c': is_type == 1 }" @click="onType(1)">配送店铺</div>
        </div>

        <div class="num" v-if="is_type == 0 && list.length != 0">共有{{ list.length }}个清单</div>
        <div class="content" v-if="is_type == 0 && list.length != 0">
            <div class="delivery">
                <div class="delivery-title">
                    <div>清单列表</div>
                    <div class="title-right">
                        <span>采购金额&nbsp;</span>
                        <span class="right-price">¥{{ list_price }}</span>
                    </div>
                </div>
                <div v-for="(itemC, indexC) in list" :key="indexC" class="delivery-bottom" @click="onGood(itemC)">
                    <div class="delivery-item">
                        <img class="item-img" :src="itemC.good_pics" />
                        <div class="item-right">
                            <div class="item-flex">
                                <div class="item-des">{{ itemC.good_name }}</div>
                                <div class="item-price">
                                    <span class="price-icon">¥</span>
                                    <span>{{ itemC.good_base_price_arr.z_price }}</span>
                                    <span class="price-small">.{{ itemC.good_base_price_arr.x_price }}</span>
                                </div>
                            </div>
                            <div class="item-circle">{{ itemC.good_unit }}</div>
                            <div class="item-txt">数量：<span class="txt-num">x{{ itemC.good_num }}</span></div>
                            <div class="item-txt txt-nomar">单价：<span class="txt-icon">¥</span>{{ itemC.good_base_price_arr.z_price }}<span class="txt-small">.{{ itemC.good_base_price_arr.x_price }}</span></div>
                        </div>
                    </div>
                    <div class="delivery-shop">
                        <div class="shop-title">配送明细</div>
                        <div class="shop-content">
                            <div class="shop-flex" v-for="(itemS, indexS) in itemC.buyerList" :key="indexS">
                                <div>{{ itemS.name }}</div>
                                <div class="shop-num">x{{ itemS.num }}</div>
                            </div>
                        </div>
                        <div class="shop-btn">
                            <van-button v-if="itemC.is_stock_up == 0" class="btn-over" @click.stop="onStockUp(itemC, indexC)">完成备货</van-button>
                            <div  v-if="itemC.is_stock_up == 1" class="btn-txt">已完成</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 无数据的时候展示 -->
        <div class="no-data" v-if="(is_type == 0 && list.length == 0) || (is_type == 1 && shop_list.length == 0)">
			<img class="no-img" src="https://files.onestep6.com/cloud/cart-no.png"  />
			<div class="no-txt">暂无数据～</div>
		</div>
        <!-- 无数据的时候展示 -->

        <!-- 配送店铺 -->
        <div class="list-bottom" v-if="is_type == 1">
            <div class="content" v-for="(item, index) in shop_list" :key="index" @click="onDetail(item)">
                <div class="conetnt-title">
                    <div class="title-flex">
                        <img class="title-img" src="https://files.onestep6.com/cloud/order-icon.png" />
                        <div class="title-txt">{{ item.user_shop_name }}</div>
                    </div>
                    <div class="title-type">
                        <span v-if="item.status == 1" class="type-fk">待接单</span>
                        <span v-if="item.status == 3" class="type-ps">配送中</span>
                        <span v-if="item.status == 2">待发货</span>
                        <span v-if="item.status == 4">已完成</span>
                    </div>
                </div>
                <div class="content-info">
                    <div class="info-flex">
                        <span class="info-name">店铺地址</span>
                        <span class="info-address">{{ item.address }}</span>
                        <img class="info-icon" src="https://files.onestep6.com/cloud/order-right.png" />
                    </div>
                    <div class="info-flex">
                        <span class="info-name">联系人名</span>
                        <span class="info-address">{{ item.contact_user }}</span>
                    </div>
                    <div class="info-flex">
                        <span class="info-name">联系电话</span>
                        <a class="info-a" :href="`tel:+86${item.contact_phone}`" @click.stop="() => { }">
                            <span class="info-address">{{ item.contact_phone }}</span>
                            <div class="info-iconBg">
                                <img class="info-phone" src="https://files.onestep6.com/cloud/delivery-phone.png" />
                            </div>
                        </a>
                    </div>
                </div>
                <div class="content-order" v-for="(itemG,indexG) in item.goods" :key="indexG">
                    <div class="order-scroll">
                        <div class="scroll">
                            <div class="scroll-content">
                                <img class="scroll-img" v-for="(itemC, indexC) in itemG.good_list" :key="indexC"
                                    :src="itemC.good_pics" />
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="order-num">
                            <span>共{{ itemG.count }}件</span>
                            <img class="num-icon" src="https://files.onestep6.com/cloud/order-right.png" />
                        </div>
                        <div v-if="item.status == 1" class="order-txt">待接单</div>
                        <div v-if="item.status == 3" class="order-txt">配送中</div>
                        <div v-if="item.status == 2" class="order-txt">待发货</div>
                        <div v-if="item.status == 4" class="order-txt">已完成</div>
                    </div>
                   
                </div>
                <div class="content-time">
                    <div class="time-txt" v-if="item.delivery_type == 2 && item.delivery_num && (item.status == 3 || item.status == 4)">快递单号：<span class="txt-col">{{ item.delivery_num }}</span></div>
                    <div class="time-txt" v-else-if="item.delivery_type == 1">配送时间：<span class="txt-col">{{ item.delivery_time }}</span></div>
                    <div v-else></div>

                    <div class="time-price">
                        <span>采购金额</span>
                        <span class="price-iocn">¥</span>
                        <span class="price-num">{{ item.price_arr.z_price }}</span>
                        <span class="price-small">.{{ item.price_arr.x_price }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="price" v-if="is_type == 0 && list.length != 0">
			<div class="price-right">已完成备货 <span class="price-num">{{ over_num }}</span><span>/{{ list.length }}</span></div>
		</div>

    </div>
</template>
<script>
import moment from 'moment'
import { orderGoodList, orderShopList, stockUp } from "@/api/cloud";
export default {
    data() {
        return {
            is_active: 0,
            is_type: 0,
            today: '',
            today_p: '',
            nextday: '',
            nextday_p: '',
            list: [],
            list_price: '',
            shop_list: [],
            over_num: 0
        }
    },
    mounted() {
        // 当天日期（格式：YYYY-MM-DD）
        const today = moment().format('MM-DD');
        this.today = today;
        const today_p = moment().format('YYYY-MM-DD');
        this.today_p = today_p;
        // 后一天（明天）日期
        const nextday = moment().add(1, 'days').format('MM-DD');
        this.nextday = nextday;
        const nextday_p = moment().add(1, 'days').format('YYYY-MM-DD');
        this.nextday_p = nextday_p;

        this.orderGoodList();
        // this.orderShopList();
    },
    methods: {
        onClickLeft() {
            this.$router.back();
        },
        onActive(num) {
            if (this.is_active == num) {
                return false;
            }
            this.is_active = num;
            if (this.is_type == 0) {
                this.list = [];
                this.orderGoodList();
            } else {
                this.shop_list = [];
                this.orderShopList();
            }
        },
        onType(num) {
            if (this.is_type == num) {
                return false;
            }
            this.is_type = num;
            if (num == 0) {
                this.orderGoodList();
            } else {
                this.orderShopList();
            }
        },
        async orderGoodList() {
            const res = await orderGoodList({
                dates: this.is_active == 0 ? this.today_p : this.nextday_p
            })
            if (res.status == 1) {
                console.log(res)
                let num = 0;
                res.data.list.forEach((item)=>{
                    if(item.is_stock_up == 1){
                        num++;
                    }
                })
                this.over_num = num;
                this.list = res.data.list;
                this.list_price = res.data.price;
            }
        },
        async orderShopList() {
            const res = await orderShopList({
                dates: this.is_active == 0 ? this.today_p : this.nextday_p
            })
            if (res.status == 1) {
                console.log(res)
                this.shop_list = res.data.list;
            }
        },
        // 完成备货
        async onStockUp(item, index) {
            const res = await stockUp({
                good_id: item.good_id,
                id_arr: item.id_arr
            })
            if (res.status == 1) {
                this.$set(this.list[index], 'is_stock_up', 1)
                let num = 0;
                this.list.forEach((item)=>{
                    if(item.is_stock_up == 1){
                        num++;
                    }
                })
                this.over_num = num;
            }
        },
        onGood(item) {
            this.$router.push({
				path: '/goodDetail',
				query: {
					id: item.good_id
				}
			})
        },
        onDetail(item) {
            this.$router.push({
                path: '/orderDetail',
                query: {
                id: item.id
                }
            })
        },
    },
}
</script>
<style lang="less" scoped>
#apply {
    width: 100vw;
    min-height: 100vh;
    padding-top: calc(92px + 88px + 100px);
    padding-bottom: 198px;
    background: #FAFAFA;

    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }

    ::v-deep .van-nav-bar {
        background: #FFFFFF;
    }

    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}

.time-tabs {
    position: fixed;
    left: 0;
    top: 92px;
    z-index: 100;
    width: 100vw;
    height: 88px;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    background: #FFFFFF;

    .time-left {
        flex: 1;
        padding-left: 48px;
        padding-right: 94px;
        display: flex;
        height: 58px;
        font-size: 28px;
        line-height: 28px;
        font-weight: 400;
        color: #798391;

        div {
            margin-right: 66px;
        }
    }

    .time-active {
        position: relative;
        font-weight: bold;
        color: #49CA6F;
    }

    .time-active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 6px;
        background: #49CA6F;
    }
}

.type {
    position: fixed;
    left: 0;
    top: 180px;
    z-index: 100;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100px;
    padding-left: 44px;

    .type-item {
        position: relative;
        width: 100px;
        height: 52px;
        font-size: 24px;
        line-height: 52px;
        font-weight: 400;
        color: #798391;
        text-align: center;
        margin-right: 68px;
    }

    .type-c {
        font-weight: bold;
        color: #202630;
    }

    .type-badge {
        position: absolute;
        top: -5px;
        right: 0;
        transform: translateX(20%);
        width: fit-content;
        padding: 0 6px;
        height: 24px;
        font-size: 20px;
        line-height: 24px;
        font-weight: 400;
        color: #FFFFFF;
        background: #FF4D4F;
        border-radius: 40px;
    }
}

.num {
    font-size: 24px;
    line-height: 30px;
    color: #798391;
    font-weight: bold;
    padding-left: 50px;
    padding-bottom: 10px;
}

.delivery {
    width: 702px;
    padding-bottom: 36px;
	background: #FFFFFF;
	border-radius: 16px;
    margin: 0 auto 24px;
	.delivery-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 646px;
		height: 98px;
		font-size: 32px;
		line-height: 32px;
		font-weight: bold;
		color: #141414;
		border-bottom: 2px solid #F5F5F6;
		margin:0 auto 24px;

        .title-right {
            font-size: 24px;
            line-height: 32px;
            color: #798391;
            font-weight: 400;

            .right-price {
                font-size: 32px;
                line-height: 32px;
                color: #49CA6F;
                font-weight: bold;
            }
        }
    }

    .title-txt {
        font-size: 24px;
        line-height: 24px;
        color: #798391;
        font-weight: 400;
    }

    .delivery-bottom {
        margin-bottom: 24px;
    }

    .delivery-item {
        display: flex;
        padding-left: 26px;
        padding-right: 22px;
        margin-bottom: 34px;

        .item-img {
            flex-shrink: 0;
            display: block;
            width: 220px;
            height: 220px;
            border-radius: 8px;
            margin-right: 24px;
        }

        .item-right {
            flex: 1;
            flex-shrink: 0;
        }

        .item-flex {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .item-des {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
            min-height: 80px;
            width: 282px;
            font-size: 28px;
            line-height: 40px;
            color: #333333;
            font-weight: 400;
        }

        .item-price {
            font-size: 40px;
            line-height: 40px;
            color: #141414;
            font-weight: bold;

            .price-icon {
                font-size: 24px;
            }

            .price-small {
                font-size: 28px;
            }
        }

        .item-circle {
            width: fit-content;
            padding: 0px 6px;
            margin-right: 6px;
            margin-bottom: 14px;
            font-size: 20px;
            line-height: 24px;
            color: #FFFFFF;
            background: #49CA6F;
            border-radius: 4px;
        }

        .item-txt {
            font-size: 24px;
            line-height: 34px;
            font-weight: 400;
            color: #798391;
            margin-bottom: 14px;
        }

        .txt-icon {
            font-size: 20px;
        }

        .txt-small {
            font-size: 20px;
        }

        .txt-num {
            color: #FF4D4F;
        }

        .txt-nomar {
            margin-bottom: 0;
        }
    }

    .delivery-more {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        line-height: 40px;
        font-weight: 400;
        color: #798391;
        padding-top: 20px;
        padding-bottom: 12px;

        .more-img {
            display: block;
            width: 32px;
            height: 32px;
        }

        .more-back {
            transform: rotate(180deg);
        }
    }

    .delivery-shop {
        padding: 0 24px;

        .shop-title {
            font-size: 24px;
            line-height: 40px;
            color: #000000;
            margin-bottom: 18px;
        }

        .shop-content {
            padding-top: 20px;
            padding-right: 30px;
            padding-left: 24px;
            padding-bottom: 4px;
            background: #F5F5F6;
            border-radius: 12px;
            margin-bottom: 16px;
        }

        .shop-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 18px;
            font-size: 20px;
            line-height: 22px;
            color: #798391;
            font-weight: 400;

            .shop-num {
                color: #000000;
            }
        }

        .shop-btn {
            display: flex;
            justify-content: flex-end;
            padding-bottom: 20px;
            border-bottom: 2px solid #F5F5F6;

            .btn-over {
                flex-shrink: 0;
                display: block;
                width: 128px;
                height: 56px;
                background: #49CA6F;
                border-radius: 39px;
                font-size: 24px;
                line-height: 56px;
                color: #FFFFFF;
                font-weight: 500;
                border: none;
                margin-left: 14px;
                padding: 0;
            }

            .btn-txt {
                font-size: 24px;
                line-height: 24px;
                color: #798391;
                font-weight: 400;
                margin-bottom: 24px;
            }
        }
    }
}

.list-bottom {
    padding-bottom: 200px;
    .content {
        width: 702px;
        border-radius: 16px;
        padding: 34px 26px 32px 32px;
        background: #FFFFFF;
        margin: 0 auto 24px;

        .conetnt-title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 32px;

            .title-flex {
                display: flex;
                align-items: center;
            }

            .title-img {
                flex-shrink: 0;
                display: block;
                width: 36px;
                height: 36px;
                margin-right: 8px;
            }

            .title-txt {
                font-size: 32px;
                line-height: 36px;
                color: #141414;
                font-weight: bold;
            }

            .title-type {
                font-size: 24px;
                line-height: 36px;
                color: #798391;
                font-weight: 400;

                .type-ps {
                    color: #49CA6F;
                }

                .type-fk {
                    color: #FF0000;
                }
            }
        }

        .content-info {
            width: 646px;
            margin: 0 auto 26px;
            padding-bottom: 10px;
            border-bottom: 2px solid #F5F5F6;

            .info-flex {
                display: flex;
                align-items: center;
                margin-bottom: 16px;

                .info-a {
                    display: flex;
                    align-items: center;
                }

                .info-name {
                    flex-shrink: 0;
                    font-size: 24px;
                    line-height: 24px;
                    font-weight: bold;
                    color: #202630;
                    margin-right: 14px;
                }

                .info-address {
                    font-size: 24px;
                    line-height: 24px;
                    font-weight: 400;
                    color: #474D57;
                }

                .info-icon {
                    display: block;
                    width: 24px;
                    height: 24px;
                    margin-left: 22px;
                }

                .info-iconBg {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    background: #F5F5F6;
                    border-radius: 8px;
                    margin-left: 28px;
                }

                .info-phone {
                    display: block;
                    width: 24px;
                    height: 24px;
                }

            }
        }

        .content-order {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            .order-scroll {
                width: 502px;
                height: 128px;

                .scroll {
                    width: 502px;
                    height: 128px;
                    overflow-x: scroll;
                    scrollbar-width: none;
                    /* Firefox 隐藏滚动条 */
                    -ms-overflow-style: none;
                    /* IE 10+ 隐藏滚动条 */
                }

                .scroll::-webkit-scrollbar {
                    display: none;
                    /* Chrome、Safari、Edge 隐藏滚动条 */
                }
            }

            .scroll-content {
                display: flex;
                flex-wrap: nowrap;
                align-items: center;

                .scroll-img {
                    flex-shrink: 0;
                    display: block;
                    width: 128px;
                    height: 128px;
                    border-radius: 8px;
                    margin-right: 24px;
                }
            }

            .order-num {
                flex: 1;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 24px;
                line-height: 24px;
                color: #798391;
                font-weight: 400;

                .num-icon {
                    flex-shrink: 0;
                    display: block;
                    width: 24px;
                    height: 24px;
                    margin-left: 2px;
                }
            }
            .order-txt{
                padding-top: 14px;
                font-size: 20px;
                line-height: 22px;
                color: #000000;
                font-weight: 400;
            }
        }

        .content-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 20px;
            margin-bottom: 32px;

            .time-txt {
                font-size: 20px;
                line-height: 22px;
                color: #798391;
                font-weight: 400;

                .txt-col {
                    color: #49CA6F;
                }
            }

            .time-price {
                font-size: 24px;
                color: #141414;
                font-weight: bold;

                .price-iocn {
                    margin-left: 4px;
                    margin-right: 2px;
                }

                .price-num {
                    font-size: 40px;
                }

                .price-small {
                    font-size: 28px;
                }
            }
        }

        .content-bottom {
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .bottom-btn {
                flex-shrink: 0;
                // width: fit-content;
                // padding: 18px 26px 16px 28px;
                width: 128px;
                height: 56px;
                padding: 0;
                background: #49CA6F;
                border-radius: 39px;
                font-size: 24px;
                line-height: 24px;
                font-weight: 400;
                color: #FFFFFF;
                margin: 0;
            }

            .btn-again {
                background: #FFFFFF;
                border: 2px solid #49CA6F;
                color: #49CA6F;
                margin-right: 16px;
            }
        }
    }
}

.no-data{
	padding-top: 82px;
	.no-img{
		display: block;
		width: 222px;
		height: 222px;
		margin: 0 auto 20px;
	}
	.no-txt{
		font-size: 28px;
		line-height: 44px;
		color: #798391;
		text-align: center;
	}
}

.price{
	position: fixed;
    left: 0;
    bottom: 0;
	display: flex;
	justify-content: flex-end;
    width: 100vw;
    padding-top: 19px;
	padding-left: 56px;
	padding-right: 28px;
    padding-bottom: calc(20px + constant(safe-area-inset-bottom)); /* 兼容 iOS<11.2 */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 兼容iOS>= 11.2 */
    background: #FFFFFF;
	.price-right{
		display: flex;
		align-items: flex-end;
        font-size: 24px;
        line-height: 38px;
        color: #000000;
        font-weight: bold;
        span{
            font-size: 48px;
            line-height: 52px;
            color: #798391;
            font-weight: 500;
        }
        .price-num{
            color: #49CA6F;
        }
	}
}
</style>